<template>
	<view>
		<view class="locat">
			<view class="loca-di" v-if="jc.loca == null">
				<view @click="dizi">
					获取收货地址
				</view>
			</view>
			<view class="shoj" v-else>
				<view class="dizs">
					<view class="">
						收件人:{{jc.loca.userName}}
					</view>
					<view class="">
						{{jc.loca.telNumber}}
					</view>
				</view>
				<view>
					{{jc.loca.cityName+jc.loca.countyName+jc.loca.detailInfo}}
				</view>
			</view>
		</view>
		<uni-swipe-action-item v-for="(item,index) in store.Gowu" :right-options="jc.options"   :auto-close="0"  @click="bindClick(index)">
			<view class="gwu">
				<view class="gwu-bott" @click='gaib(index)'>
					<radio :checked="item.zt" color='#007AFF' />
				</view>
				<view class="gwu-img">
					<image :src="item.logo" mode="" style="width: 80%;height: 80%"></image>
				</view>
				<view class="gwu-com">
					<view class="gwu-com-text">
						{{item.name}}
					</view>
					<view class="gwu-com-jiag">
						<view>{{item.price}}</view>
						<view>
							<view @click="jie(item)">
								-
							</view>
							<view>
								{{item.shul}}
							</view>
							<view @click="add(item)">
								+
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-swipe-action-item>
	</view>
	<view style="height:80rpx;">
	</view>
	<view class="jiesuan">
		<view class="jiesuan-left">
			<radio :checked="jc.quan" @click="quanss" color='#007AFF' />全选
		</view>
		<view class="jiesuan-right">
			<view class="jiesuan-right-c">
				<view class="">
					<view class="">
						合计：
					</view>
					<view class="">
						${{jc.zongjia }}
					</view>
				</view>
				<view class="">
					包含运费
				</view>
			</view>
			<view class="jiesuan-right-j">
				结算
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		Usegwo
	} from "/store";
	import {
		onMounted,
		reactive
	} from 'vue';
	let store = Usegwo();
	store.Gowu = store.Gowu || []
	const jc = reactive({
		loca: null,
		quan: null,
		zongjia: 0,
		options: [{
			text: '删除',
			style: {
				backgroundColor: '#007aff'
			}
		}]
	})

	function gaib(index) {
		store.Gowu[index].zt = !store.Gowu[index].zt
		uni.setStorageSync('Gowu', store.Gowu);
		shua()
		quanx()
		zong();
	}

	function add(item) {
		if (item.shul >= 10) {
			uni.showLoading({
				title: '不能超过10个',
			})
			setTimeout(() => {
				uni.hideLoading()
			}, 500)
			return
		}
		item.shul++
		uni.setStorageSync('Gowu', store.Gowu);
		zong();
	}

	function jie(item) {
		if (item.shul <= 1) {
			uni.showLoading({
				title: '不能少于1',
			})
			setTimeout(() => {
				uni.hideLoading()
			}, 500)
			return
		}
		item.shul--
		uni.setStorageSync('Gowu', store.Gowu);
		zong();
	}

	const shua = () => {
		let gwo = uni.getStorageSync('Gowu') || []
		let num = 0;
		gwo.forEach(item => {
			if (item.zt) {
				num++
			}
		})
		uni.setTabBarBadge({
			index: 2,
			text: num.toString()
		})
	}

	function dizi() {
		uni.chooseAddress({
			success(res) {
				uni.setStorageSync('loca', res)
				jc.loca = uni.getStorageSync('loca');
			}
		})
	}
	onMounted(() => {
		jc.loca = uni.getStorageSync('loca') || null;
		quanx();
		zong();
	})

	function quanx() {
		jc.quan = store.Gowu.every(item => item.zt);
		if(store.Gowu.length == 0){
			jc.quan = false
		}
	}
	const quanss = () => {
		jc.quan = !jc.quan
		if (jc.quan) {
			store.Gowu.forEach(item => {
				item.zt = jc.quan
			})
			uni.setStorageSync('Gowu', store.Gowu);
		} else {
			store.Gowu.forEach(item => {
				item.zt = jc.quan
			})
			uni.setStorageSync('Gowu', store.Gowu);
		}
		zong();
	}
	const zong = () => {
		jc.zongjia = 0
		store.Gowu.forEach(item => {
			if (item.zt) {
				jc.zongjia += item.shul * item.price
			}
		})
	}
	function bindClick(index){
		console.log(index)
		store.Gowu.splice(index,1)
		uni.setStorageSync('Gowu', store.Gowu);
	} 	

</script>

<script>
	export default {
		data() {
			return {

			};
		},
		onShow() {
			let gwo = uni.getStorageSync('Gowu') || []
			let num = 0;
			gwo.forEach(item => {
				if (item.zt) {
					num++
				}
			})
			uni.setTabBarBadge({
				index: 2,
				text: `${num}`
			})
		}
	}
</script>

<style lang="scss">
	.locat {
		height: 120rpx;

		>.loca-di {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;

			>view {
				width: 300rpx;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				border: 2px solid orange;
				color: orange;
				border-radius: 10rpx;
			}
		}
	}

	.gwu {
		height: 150rpx;
		display: flex;
		padding: 20rpx;

		>.gwu-bott {
			width: 60rpx;
			display: flex;
			align-items: center;
		}

		>.gwu-img {
			width: 150rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		>.gwu-com {
			flex: 1;
			display: flex;
			flex-direction: column;

			>.gwu-com-text {
				flex: 1;
				overflow: hidden;
			}

			>.gwu-com-jiag {
				flex: 1;
				display: flex;
				justify-content: space-between;

				>view:nth-child(1) {
					font-size: 34rpx;
					color: red;
				}

				>view:nth-child(2) {
					width: 150rpx;
					height: 100%;
					text-align: center;
					display: flex;
					justify-content: space-between;
					align-items: flex-end;

					>view {
						width: 45rpx;
						height: 45rpx;
						border: 1px solid gray;
					}

					>view:nth-child(2) {
						flex: 1;
						border: none;
					}
				}
			}
		}
	}

	.shoj {
		padding: 20rpx;
	}

	.dizs {
		display: flex;
		justify-content: space-between;
	}

	.jiesuan {
		display: flex;
		justify-content: space-between;
		height: 80rpx;
		position: fixed;
		bottom: 0;
		width: 100%;

		>.jiesuan-left {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 120rpx;
		}

		>.jiesuan-right {
			display: flex;
			width: 480rpx;

			>.jiesuan-right-c {
				width: 240rpx;
				font-size: 28rpx;
				margin-right: 10rpx;

				>view:nth-child(1) {
					font-weight: bold;
					height: 40rpx;
					line-height: 40rpx;
					display: flex;

					>view:nth-child(1) {
						width: 90rpx;
					}

					>view:nth-child(2) {
						color: red;
						text-align: right;
						flex: 1;
						overflow: hidden;
					}
				}

				>view:nth-child(2) {
					text-align: right;
					height: 50rpx;
					line-height: 50rpx;
				}
			}

			>.jiesuan-right-j {
				flex: 1;
				text-align: center;
				background-color: red;
				color: #fff;
				line-height: 80rpx;
				font-size: 36rpx;
			}
		}
	}
</style>
